<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-08-24 15:43:00
 * @LastEditors: wangshuguang
 * @Description:  收入记录
-->
<template>
  <div class="common-container">
    <!-- 筛选条件 -->
    <el-card>
      <el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
        <el-row>
          <el-col :span="24" prop="date">
            <el-form-item label="时间">
              <el-radio-group v-model="filterDate" size="small" @change="dataRadioChange">
                <el-radio-button :label="1">今天</el-radio-button>
                <el-radio-button :label="2">昨天</el-radio-button>
                <el-radio-button :label="7">近7天</el-radio-button>
                <el-radio-button :label="15">近15天</el-radio-button>
                <el-radio-button :label="30">近30天</el-radio-button>
                <el-radio-button label="nowMonth">本月</el-radio-button>
              </el-radio-group>&nbsp;
              <el-date-picker
                v-model="filterTime"
                :clearable="false"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="pickerChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="payType">
              <el-select v-model="listQuery.payType" clearable placeholder="请选择" size="small" class="width100">
                <el-option label="全部" value="" />
                <el-option label="微信" value="1" />
                <el-option label="余额" value="2" />
                <el-option label="支付宝" value="3" />
                <el-option label="银联" value="4" />
                <el-option label="现金" value="5" />
                <el-option label="花呗" value="6" />
                <el-option label="云闪付" value="7" />
                <el-option label="礼品卡" value="9" />
              </el-select>
            </el-form-item>
          </el-col>

          <div v-show="showMoreFilter">
            <el-col :span="12">
              <el-form-item label="支付状态" prop="payStatus">
                <el-select v-model="listQuery.payStatus" clearable placeholder="请选择" size="small" class="width100">
                  <el-option label="全部" value="" />
                  <el-option label="支付成功" value="100" />
                  <el-option label="待支付" value="101" />
                  <el-option label="支付中" value="102" />
                  <el-option label="支付失败" value="104" />
                  <!-- <el-option label="主动取消" value="105" /> -->
                  <el-option label="退款成功" value="200" />
                  <el-option label="退款中" value="201" />
                  <el-option label="退款失败" value="202" />
                  <el-option label="部分退款" value="205" />
                  <el-option label="待结算" value="300" />
                  <el-option label="结算中" value="301" />
                  <el-option label="结算成功" value="302" />
                  <el-option label="结算失败" value="303" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付门店" prop="shopId">
                <el-select
                  v-model="listQuery.shopId"
                  filterable
                  size="small"
                  class="width100"
                  placeholder="可通过名称搜索"
                  style="width:300px"
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.allManageShopFilterOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型" prop="type">
                <el-select v-model="listQuery.type" clearable placeholder="请选择" size="small" class="width100">
                  <el-option label="全部" value="" />
                  <el-option label="会员充值" value="2" />
                  <el-option label="会员开卡" value="34" />
                  <el-option label="商城" value="5" />
                  <el-option label="点餐" value="6" />
                  <el-option label="预订" value="7" />
                  <el-option label="赠送会员" value="9" />
                  <el-option label="会员续费" value="10" />
                  <el-option label="码牌支付" value="14" />
                  <el-option label="收款" value="15" />
                  <el-option label="插件返佣" value="16" />
                  <el-option label="预约" value="17" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务来源" prop="source">
                <el-select v-model="listQuery.source" clearable placeholder="请选择" size="small" class="width100">
                  <el-option label="全部" value="" />
                  <el-option label="微信会员小程序" value="1" />
                  <el-option label="聚合支付" value="9" />
                  <el-option label="商户app" value="10" />
                  <el-option label="POS机app" value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用插件" prop="pluginCode">
                <el-select v-model="listQuery.pluginCode" clearable placeholder="请选择" size="small" class="width100">
                  <el-option label="全部" value="" />
                  <el-option label="未使用插件" value="0" />
                  <el-option label="超级会员" value="supermember" />
                  <el-option label="储值AI" value="2" />
                  <el-option label="满减满折" value="discount" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额区间" prop="beginAmt">
                <el-input v-model="listQuery.beginAmt" placeholder="最低价" type="number" style="width:100px" :controls="false" size="small" />
                <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                <el-input v-model="listQuery.endAmt" placeholder="最高价" type="number" style="width:100px" :controls="false" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付单号" prop="paymentNo">
                <el-input v-model="listQuery.paymentNo" clearable placeholder="请输入" size="small" class="width100" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务单号" prop="orderNo">
                <el-input v-model="listQuery.orderNo" clearable placeholder="请输入" size="small" class="width100" />
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" round size="small" @click="fetchData">查询</el-button>
              <el-button type="primary" round size="small" @click="resetForm('filterForm')">重置</el-button>
              <el-button type="text" round size="small" @click="showMoreFilter = !showMoreFilter">{{ showMoreFilter ? '收起高级选项' : '展开高级选项' }}</el-button>
              <el-button type="text" round size="small" @click="downFile">导出为excel</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 数据看板 -->
    <div class="dataCard">
      <el-card>
        <div class="title">订单金额和笔数</div>
        <div class="money">{{ dataCard.totAmt }}元</div>
        <div class="money">{{ dataCard.totNum }}笔</div>
      </el-card>
      <el-card>
        <div class="title">退款金额和笔数</div>
        <div class="money">{{ dataCard.refundAmt }}元</div>
        <div class="money">{{ dataCard.refundNum }}笔</div>
      </el-card>
      <el-card>
        <div class="title">实收金额
          <el-tooltip class="item" effect="light" content="实收金额包括礼品卡、余额、线上交易" placement="right">
            <i class="el-icon-question" style="color:#ffb72f" />
          </el-tooltip>
        </div>
        <div class="money">{{ dataCard.realAmt }}元</div>
        <div class="content">
          <div>礼品卡支付 {{ dataCard.giftCardAmt||0 }} 元</div>
          <div style="margin:5px 0;">余额支付 {{ dataCard.balanceAmt }} 元</div>
          <div>线上交易 {{ dataCard.onlineAmt }} 元</div>
        </div>
      </el-card>
    </div>
    <div class="dataList">
      <el-table size="medium" :data="list" border>
        <el-table-column prop="roleTypeZh" align="center" label="序号">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="paymentMethodZh" align="center" label="支付方式" />
        <el-table-column prop="paymentNo" align="center" label="支付单号" />
        <el-table-column prop="typeZh" align="center" label="业务类型" />
        <el-table-column prop="sourceZh" align="center" label="业务来源" />
        <el-table-column prop="orderNo" align="center" label="业务单号" />
        <!-- 交易中心进入时  展示会员信息 -->
        <el-table-column v-if="sourcePage == 'payCenter'" prop="memberInfo" align="center" label="会员信息" />
        <el-table-column v-else prop="shopName" align="center" label="支付门店" />
        <el-table-column prop="pluginCodeZh" align="center" label="使用插件" />
        <el-table-column prop="totalFee" align="center" label="订单金额/元" />
        <el-table-column prop="refundAmt" align="center" label="退款金额/元" />
        <el-table-column prop="realAmt" align="center" label="实收金额/元" />
        <el-table-column prop="paymentStatusZh" align="center" label="支付状态" />
        <el-table-column prop="paymentTime" align="center" label="发起支付时间" />
        <el-table-column prop="remark" align="center" label="备注" width="200" />
        <el-table-column prop="statisticalTime" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="viewData(scope.row)">详情</el-button>
            <!-- 退款按钮展示条件： 会员详情页面 & 支付状态不是【待支付】 & 业务类型为【商城，预定】 && 可退款有值 -->
            <el-button
              v-if="sourcePage == 'vipDetail' && [100,205].includes(scope.row.paymentStatus) && [5,7, 6,14,15,17].includes(scope.row.type) && scope.row.canRefAmt"
              type="text"
              @click="refundOrder(scope.row)"
            >退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 退款弹框 -->
    <RefundDialog v-model="refundVisible" :info-config="infoConfig" @sucClose="sucClose" />
    <!-- 详情弹框 -->
    <el-dialog
      title="支付订单详情"
      :visible.sync="orderDetailVisible"
      width="70%"
      :before-close="handleClose"
    >
      <IncomeHisDetail v-if="orderDetailVisible" :info-config="infoConfig" @sucClose="sucClose" />
    </el-dialog>
  </div>
</template>

<script>
import { qryIncomeRecord, exportMercIncome } from '@/api/payCenter'
import { mapGetters } from 'vuex'
import { dateFtt, removePropertyOfNull } from '@/utils'
import { getFilterFormPastTime } from '@/utils/format'

import IncomeHisDetail from '../components/IncomeHisDetail.vue'
import RefundDialog from '../components/RefundDialog.vue'

export default {
  components: { IncomeHisDetail, RefundDialog },
  props: {
    vipDetail: {},
    // sourcePage来源页面  交易中心-payCenter  会员详情-vipDetail
    sourcePage: {
      default: 'payCenter'
    }
  },
  data() {
    return {
      orderDetailVisible: false,
      showMoreFilter: false,
      infoVisible: false,
      refundVisible: false,
      infoConfig: {},
      form: {},
      dataCard: {},
      scope: 0,
      total: 0,
      filterDate: 1,
      filterTime: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        payType: '',
        payStatus: '',
        paymentNo: '',
        pluginCode: '',
        orderNo: '',
        type: '',
        shopId: '',
        beginAmt: '',
        source: '',
        endAmt: '',
        beginTime: '',
        endTime: ''
      },
      list: []
    }
  },
  computed: {
    ...mapGetters(['businessInfo'])
  },
  async mounted() {
    // 设置时间查询默认值
    let filtrList = ['cancelTable']
    let {query} = this.$route
      if(query?.orderNo&&filtrList.indexOf(query?.from)!=-1){
      qryIncomeRecord({orderNo:query.orderNo}).then(res => {
        if (res.code === 0) {
          const { list, total } = res.data.pageList
          this.infoConfig = list[0]
          this.orderDetailVisible = true
        }
      })
      return 
    }
    this.filterDate = 1
    this.dataRadioChange(1)
  },
  methods: {
    refundOrder(item) {
      this.infoConfig = item
      this.refundVisible = true
    },
    sucClose() {
      this.orderDetailVisible = false
      this.refundVisible = false
      this.fetchData()
    },
    viewData(data) {
      this.infoConfig = data
      this.orderDetailVisible = true
    },
    pickerChange(val) {
      // 时间筛选条件切换
      console.log('pickerChange', val)
      this.listQuery.beginTime = val[0]
      this.listQuery.endTime = val[1]
      this.filterDate = ''
      this.fetchData()
    },
    async dataRadioChange(val) {
      // 时间tab切换
      let dateArr = []
      if (val == 'nowMonth') {
        dateArr = await getFilterFormPastTime('nowMonth')
      } else if (val == 2) {
        dateArr = await getFilterFormPastTime('yesterday')
      } else {
        dateArr = await getFilterFormPastTime(val)
      }
      this.listQuery.beginTime = dateArr[0]
      this.listQuery.endTime = dateArr[1]
      console.log('val', val, dateArr)
      this.filterTime = []
      this.fetchData()
    },
    // 重置
    resetForm(formName) {
      this.filterDate = 1
      this.listQuery.endAmt = ''
      this.listQuery.beginAmt = ''
      this.$refs[formName].resetFields()
      this.dataRadioChange(1)
    },
    downFile() {
      const obj = {
        ...this.listQuery,
        memberId: this.$route.query.memberId || ''
      }
      exportMercIncome(removePropertyOfNull(obj)).then(res => {
        console.log('res', res)
        if (res.code === 0) {
          this.$alert(
            '数据导出中，请稍后到数据下载中心进行下载',
            '提示',
            {
              confirmButtonText: '确定',
              center: true,
              type: 'success',
              callback: action => {}
            }
          )
        }
      })
    },
    fetchData() {
      const obj = {
        ...this.listQuery,
        memberId: this.$route.query.memberId || ''
      }
      qryIncomeRecord(removePropertyOfNull(obj)).then(res => {
        if (res.code === 0) {
          const { list, total } = res.data.pageList
          console.log('res', res)
          this.list = list
          this.total = total
          this.dataCard = {
            ...res.data,
            pageList: null
          }
        }
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleClose(){
      let filtrList = ['cancelTable']
      let {query} = this.$route
      if(query?.orderNo&&filtrList.indexOf(query?.from)!=-1){
        window.close()
        return 
      }
      this.orderDetailVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.labelText{
  color: rgb(115, 115, 115);
  font-size: 12px;
}
.common-container{
  // background: #fff;
  border-radius: 5px;
  padding: 20px;
  .dataCard{
    display: flex;
    /deep/.el-card{
      margin: 10px 10px 10px 0;
      min-width: 200px;
      .el-card__body{
        padding: 10px 20px;
        .title{
          border-left: 3px solid #ffb72f;
          padding-left: 5px;
        }
        .money{
          font-size: 20px;
          margin-top: 15px;
        }
        .content{
          margin-top: 15px;
          font-size: 12px;
        }
      }
    }
  }
  .dataList{
    background: #fff;
  }
}
</style>

